<script setup lang="ts">
import { ref } from "vue";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import ReCol from "@/components/ReCol";
import { selectPageFormProps } from "./utils/types";

const pageList = [
  {
    path: "/customerManagement/data/index",
    name: "customerManagementData",
    meta: {
      icon: "ri:database-2-line",
      title: "客户数据"
    }
  },
  {
    path: "/customerManagement/label/index",
    name: "customerManagementLabel",
    meta: {
      icon: "ri:price-tag-3-line",
      title: "标签管理"
    }
  },
  {
    path: "/customerManagement/rules/index",
    name: "customerManagementRules",
    meta: {
      icon: "ri:settings-3-line",
      title: "数据处理规则"
    }
  },
  // {
  //   path: "/customerManagement/highseas/index",
  //   name: "customerManagementHighseas",
  //   meta: {
  //     icon: "ri:archive-line",
  //     title: "客户公海"
  //   }
  // },
  // {
  //   path: "/customerManagement/myclient/index",
  //   name: "customerManagementMyclient",
  //   meta: {
  //     icon: "ri:star-line",
  //     title: "我的客户"
  //   }
  // },
  {
    path: "/customerManagement/claim/index",
    name: "customerManagementClaim",
    meta: {
      icon: "ri:star-line",
      title: "领取客户"
    }
  },
  {
    path: "/customerManagement/follow/index",
    name: "customerManagementFollow",
    meta: {
      icon: "ri:star-line",
      title: "跟进客户"
    }
  },
  {
    path: "/customerManagement/lock/index",
    name: "customerManagementLock",
    meta: {
      icon: "ri:star-line",
      title: "锁定客户"
    }
  },
  {
    path: "/customerManagement/deal/index",
    name: "customerManagementDeal",
    meta: {
      icon: "ri:star-line",
      title: "成交客户"
    }
  },
  {
    path: "/customerManagement/discardData/index",
    name: "customerManagementDiscardData",
    meta: {
      icon: "ri:star-line",
      title: "申请废弃客户"
    }
  },
  {
    path: "/groupcallTask/groupCall/index",
    name: "groupcallTaskGroupCall",
    meta: {
      icon: "ri:group-line",
      title: "群呼话单"
    }
  },
  {
    path: "/groupcallTask/telephone/index",
    name: "groupcallTaskTelephone",
    meta: {
      icon: "ri:phone-line",
      title: "电话话单"
    }
  },
  {
    path: "/productManagement/index",
    name: "productManagement",
    meta: {
      icon: "ri:handbag-line",
      title: "成交产品管理"
    }
  },
  {
    path: "/groupcallManagement/task/index",
    name: "groupcallManagementTask",
    meta: {
      icon: "ri:chat-history-line",
      title: "外呼任务"
    }
  },
  {
    path: "/groupcallManagement/statement/index",
    name: "groupcallManagementStatement",
    meta: {
      icon: "ri:file-list-2-line",
      title: "管理者话单"
    }
  },
  {
    path: "/groupcallManagement/reportForms/index",
    name: "groupcallManagementReportForms",
    meta: {
      icon: "ri:bar-chart-2-line",
      title: "统计报表"
    }
  },
  {
    path: "/structureManagement/dept/index",
    name: "structureManagementDept",
    meta: {
      icon: "ri:safe-2-line",
      title: "部门管理"
    }
  },
  {
    path: "/structureManagement/position/index",
    name: "structureManagementPosition",
    meta: {
      icon: "ri:briefcase-2-line",
      title: "职位管理"
    }
  },
  {
    path: "/structureManagement/role/index",
    name: "structureManagementRole",
    meta: {
      icon: "ri:group-line",
      title: "角色管理"
    }
  },
  {
    path: "/structureManagement/account/index",
    name: "structureManagementAccount",
    meta: {
      icon: "ri:pass-pending-line",
      title: "成员管理"
    }
  },
  {
    path: "/customerData/index",
    name: "customerData",
    meta: {
      icon: "ri:repeat-2-line",
      title: "客户公海",
      showParent: true,
    }
  },
  {
    path: "/teamManagement/performance/index",
    name: "teamManagementPerformance",
    meta: {
      icon: "tabler:device-desktop-analytics",
      title: "成员业绩"
    }
  },
  {
    path: "/teamManagement/script/index",
    name: "teamManagementScript",
    meta: {
      icon: "tabler:message-2-search",
      title: "话术资源"
    }
  },
  {
    path: "/groupcallTask/workbenches/index",
    name: "groupcallTaskWorkbenches",
    meta: {
      icon: "ri:mac-line",
      title: "群呼工作台"
    }
  },
  {
    path: "/groupcallTask/customerStatement/index",
    name: "groupcallTaskCustomerStatement",
    meta: {
      icon: "ri:file-list-2-line",
      title: "业务员话单"
    }
  },
  {
    path: "/customerDataDirector/materialData/index",
    name: "customerDataDirectorMaterialData",
    meta: {
      icon: "ri:folder-line",
      title: "物料客池"
    }
  },
  {
    path: "/customerDataDirector/transformationData/index",
    name: "customerDataDirectorTransformationData",
    meta: {
      icon: "ri:folder-history-line",
      title: "转化客池"
    }
  },
  {
    path: "/customerDataDirector/discardData/index",
    name: "customerDataDirectorDiscardData",
    meta: {
      icon: "ri:folder-forbid-line",
      title: "废弃客池"
    }
  },
  {
    path: "/customerDataDirector/highseasData/index",
    name: "customerDataDirectorHighseasData",
    meta: {
      icon: "ri:folder-cloud-line",
      title: "公海客池"
    }
  },
  {
    path: "/callLog/statement/index",
    name: "callLogStatement",
    meta: {
      icon: "ri:phone-camera-line",
      title: "客户话单"
    }
  },
  {
    path: "/callLog/reportForms/index",
    name: "callLogReportForms",
    meta: {
      icon: "ri:line-chart-fill",
      title: "统计报表"
    }
  },
  {
    path: "/customerDataDirector/control/index",
    name: "customerDataDirectorControl",
    meta: {
      icon: "ri:archive-2-fill",
      title: "管理申请废弃"
    }
  },
  // {
  //   path: "/scriptResources/index",
  //   name: "scriptResources",
  //   meta: {
  //     icon: "ri:message-2-line",
  //     title: "话术资源"
  //   }
  // }
];

const props = withDefaults(defineProps<selectPageFormProps>(), {
  formInline: () => ({
    router: null,
    path: ""
  })
});

const ruleFormRef = ref();
const newFormInline = ref(props.formInline);

function routerSelect(row) {
  newFormInline.value.path = row.path;
  newFormInline.value.router = row;
}

function getRef() {
  return ruleFormRef.value;
}

defineExpose({ getRef });
</script>

<template>
  <div>
    <el-form ref="ruleFormRef" :model="newFormInline" label-width="0">
      <el-row :gutter="30">
        <re-col :value="24" :xs="24" :sm="24">
          <el-form-item prop="pageRouter">
            <el-scrollbar
              height="40vh"
              style="
                background-color: #f5f5f5;
                border-radius: 6px;
                padding: 0 16px;
                margin-bottom: 16px;
              "
            >
              <div class="pageList">
                <div
                  class="item"
                  v-for="(item, index) in pageList"
                  :class="{ active: newFormInline.path == item.path }"
                  :key="index"
                  @click="routerSelect(item)"
                >
                  <el-button
                    class="iconButton"
                    link
                    :icon="useRenderIcon(item.meta.icon)"
                  ></el-button>
                  <p>{{ item.meta.title }}</p>
                </div>
              </div>
            </el-scrollbar>
          </el-form-item>
        </re-col>
      </el-row>
    </el-form>
  </div>
</template>

<style scoped lang="scss">
:deep(.iconButton) {
  font-size: 18px;
}
.pageList {
  display: flex;
  flex-wrap: wrap;
  padding-top: 16px;

  .item {
    width: 168px;
    height: 48px;
    background-color: #ffffff;
    border-radius: 10px;
    margin-bottom: 16px;
    margin-right: 16px;
    display: flex;
    align-items: center;
    cursor: pointer;
    padding-left: 8px;

    p {
      font-size: 14px;
      margin-left: 6px;
    }

    &:nth-child(3n) {
      margin-right: 0;
    }

    &.active {
      background-color: var(--pure-theme-menu-active-before);

      :deep(.iconButton) {
        color: #ffffff;
      }
      p {
        color: #ffffff;
      }
    }
  }
}
</style>
